<template>
	<view class="main_bg" v-if="info.id">
		<app-header title="巡检详情"></app-header>
		<view class="card">
			<view class="cell">
				<view class="label">状态：</view>
				<view class="value" :class="['inspection_status_'+info.inspection_status]">{{info.status_name}}</view>
			</view>
			<view class="line"></view>

			<!-- 未巡检 -->
			<view v-if="!isInspection">
				<view class="cell">
					<view class="label flex-c">
						巡检计划编号：
					</view>
					<view class="value">{{info.device_sns}}</view>
				</view>
				<view class="cell">
					<view class="label">巡检名称：</view>
					<view class="value">{{info.title}}</view>
				</view>
				<view class="cell">
					<view class="label">巡检对象：</view>
					<view class="value">{{info.shop_name_f}}</view>
				</view>
				<view class="cell">
					<view class="label">巡检地点：</view>
					<view class="value" @click="$func.openLocation(info.latitude,info.longitude,info.address_f)">
						{{info.address_f}} <u-image src="/static/images/guide.png" mode="aspectFit" width="40rpx"
							height="40rpx"></u-image>
					</view>
				</view>
				<view class="cell">
					<view class="label">预计巡检时间：</view>
					<view class="value">{{info.action_start}}至{{info.action_end}}</view>
				</view>
				<view class="cell">
					<view class="label">巡检人员：</view>
					<view class="value ">{{info.name_f}}</view>
				</view>

			</view>


			<!-- 巡检中 -->
			<view v-if='isInspection'>
				<view v-for="(item,index) in form" :key="index">
					<view class="flex">
						<image :src="item.store_img" mode=""
							style='width: 218rpx;height: 218rpx;background-color: #E4E4E4;border-radius: 10rpx;'>
						</image>
						<view class="flex-right">
							<view class="title">{{item.device_name}}</view>
							<view class="device">{{item.type_name1.district_name}}</view>
							<view class="specs">
								<view class="">类型：{{item.type_name2.district_name}}</view>
								<view class="">品牌：{{item.type_name3.district_name}}</view>
								<view class="">系列：{{item.type_name4.district_name}}</view>
							</view>
						</view>
					</view>
					<view class="line"></view>
					<view <view class="cell">
						<view class="label">保养描述：</view>
					</view>
					<view class="textarea">
						<textarea placeholder="请输入" v-model="item.member_describe_s" />
						<app-upload v-model="item.member_store_imgs_s" :value="item.member_store_imgs_s" accept="media"
							multiple :maxCount="9" />
					</view>
					<view <view class="cell">
						<view class="label">是否故障</view>
						<switch color="#4F6FF6" :checked="item.has_fault" @change='handelSwitchChange' />
					</view>
					<view v-if="item.has_fault">
						<view <view class="cell">
							<view class="label">故障描述：</view>
						</view>
						<view class="textarea">
							<textarea placeholder="请输入" v-model="item.fault_describe" />
							<app-upload v-model="item.fault_imgs" :value="item.fault_imgs" accept="media" multiple
								:maxCount="9" />
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="flex-c" v-if="info.can_handle ==1">
			<view class="btn flex-c" v-if='!isInspection&&info.inspection_status!=1' @click="startInspection">开始巡检
			</view>
			<view class="btn flex-c" v-if='isInspection&&inspection_index>=0&&inspection_index!=info.order_list.length'
				@click="nextInspection(0)">下一台设备</view>
			<view class="btn flex-c" v-if='isInspection&&inspection_index==info.order_list.length'
				@click="endInspection(1)">巡检已完成
			</view>
		</view>
	</view>
</template>

<script>
	const systemInfo = uni.getSystemInfoSync();
	const safeArea = systemInfo.safeArea;
	export default {
		name: "deviceCard",

		data() {
			return {
				id: 0,
				info: {},
				form: [{
					device_id: "",
					member_describe: "",
					member_store_imgs: "",
				}],
				isInspection: false,
				inspection_index: 1,
				filter: {}
			};
		},
		computed: {
			scrollHeight() {
				return 'calc(100vh  - 102rpx)'
			},
			imgCount() {
				return (imgs) => {
					const list = imgs ? imgs.split('|') : []
					return list.length
				}
			},
			imageList() {
				return (imgs) => {
					console.log(imgs)
					const list = imgs ? imgs.split('|') : []
					return list
				}
			}
		},
		onLoad(options) {
			if (options.id) {
				this.$set(this.filter, 'id', options.id)
			}
			if (options.device_id) {
				this.$set(this.filter, 'device_id', options.device_id)
			}
			this.id = options.id
			this.getInfo()
		},
		methods: {
			handelSwitchChange(event) {
				const {
					value
				} = event.detail
				this.form[0].has_fault = value
			},
			scanCode() {
				uni.scanCode({
					success: (res) => {

						const data = decodeURIComponent(res.path)
						const arr = data.split('=')
						const deviceId = arr.length > 1 ? arr[arr.length - 1] : 0
						const info = this.form.find(item => item.device_id == deviceId)
						if (info) {
							this.$func.tips("该设备已在巡检记录中")
						} else {
							this.formAdd(deviceId)
						}
					}
				});
			},
			formAdd(id) {
				this.$http.post('/data/api.auth.User/inspectionDetection', {
					id: this.info.id,
					device_id: id
				}).then(
					res => {

						this.$http.post('/data/api.auth.User/deviceViers', {
							id: id
						}).then(res => {
							if (this.form.length > 0 && !this.form[0].device_id) {
								this.form = [{
									device_id: id,
									device_name: res.data.device_name,
									member_describe: "",
									member_store_imgs: "",
								}]
							} else {
								this.form.push({
									device_id: id,
									device_name: res.data.device_name,
									member_describe: "",
									member_store_imgs: "",
								})
							}
						})
					})


			},
			startInspection() {
				this.form = [this.info.order_list[this.inspection_index - 1]]
				this.$set(this, 'isInspection', true)
			},
			nextInspection(val) {
				this.isEnd = val
				this.onSubmit()
			},
			endInspection(val) {
				this.isEnd = val
				this.onSubmit()
			},
			onSubmit() {
				const api = '/data/api.auth.User/inspectionHandles'
				const msg = this.isEnd == 1 ? '是否确认提交，提交后则巡检结束 !' : '是否确认提交 ?'
				let form;
				let dataList = []
				for (let vo of this.form) {
					dataList.push({
						device_id: vo.order_device_id,
						fault_describe: vo.fault_describe,
						has_fault: vo.has_fault ? 1 : 0,
						fault_imgs: vo.fault_imgs,
						member_describe: vo.member_describe_s,
						member_store_imgs: vo.member_store_imgs_s
					})
				}
				const memberData = dataList.filter(item => {
					if (item.member_describe == '' && item.member_store_imgs == '') {
						return item
					}
				})
				const faultData = dataList.filter(item => {
					if (item.has_fault == 1 && item.fault_describe == '' && item.fault_imgs == '') {
						return item
					}
				})
				if (memberData.length >= 1) {
					return uni.showToast({
						title: '请填写保养信息',
						icon: 'none'
					})
				}
				if (faultData.length >= 1) {
					return uni.showToast({
						title: '请填写故障信息',
						icon: 'none'
					})
				}
				form = {
					id: this.id,
					data_list: JSON.stringify(dataList)
				}
				uni.showModal({
					title: '提示',
					content: msg,
					confirmText: "确定",
					cancelText: "取消",
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '请稍等',
								mask: true,
							})
							this.$http.post(api, form).then(res => {
								uni.hideLoading()
								this.$func.tips('提交成功')
								if (this.inspection_index == this.info.order_list.length) {
									setTimeout(() => {
										this.$func.toBack()
									}, 2000)
								} else {
									this.$set(this, 'inspection_index', this.inspection_index += 1)
									this.form = [this.info.order_list[this.inspection_index - 1]]
								}
							}).catch(e => {
								uni.hideLoading()
							})
						} else if (res.cancel) {

						}
					}
				});
			},
			getInfo() {
				this.$http.post('/data/api.auth.Repair/inspectionView', {
					...this.filter
				}).then(({
					data
				}) => {
					const {
						order_list,
						...args
					} = data
					const index = order_list.findIndex(item => item.problem_status == 0)
					this.inspection_index = index != -1 ? index + 1 : index
					this.info = data
					this.getDeviceList()
				}).catch(() => {

				})


			},
			getDeviceList() {
				//部份
				this.$http.post('/data/api.auth.User/inspectionZc1', {
					id: this.info.id
				}).then(res => {
					let form = []
					if (res.data && res.data.length > 0) {
						for (let vo of res.data) {
							form.push({
								device_id: vo.device_id,
								device_name: vo.device_name_f,
								member_describe: vo.member_describe,
								member_store_imgs: vo.member_store_imgs,
								member_store_imgs_f: vo.member_store_imgs_f,
							})
						}
						this.form = form
					} else {
						//全部
						this.$http.post('/data/api.auth.User/inspectionZc', {
							id: this.info.id
						}).then(rest => {
							this.form = [{
								device_name: rest.data.device_name_f,
								member_describe: rest.data.member_describe,
								member_store_imgs: rest.data.member_store_imgs,
								member_store_imgs_f: rest.member_store_imgs_f,
							}]
							console.log(this.form)
						}).catch(() => {

						})
					}

				}).catch(() => {

				})
			}

		}
	}
</script>

<style scoped lang="scss">
	.tags {
		justify-content: flex-start;
		margin-bottom: 10rpx;

		.tags_son {
			padding: 0 20rpx;
			min-width: 200rpx;
			height: 70rpx;
			border: 1px solid #ADADAD;
			border-radius: 10rpx;
		}
	}

	.card {
		border-radius: 20px;
		background-color: #FFFFFF;
		margin: 20rpx;
		padding: 20rpx 30rpx;
	}

	.line {
		background-color: #E9E9E9;
		height: 1px;
		margin: 15rpx 0;
	}

	.icon {
		transition-duration: 0.3s;
		width: 40rpx;
		height: 40rpx;

		&.open {
			transform: rotate(180deg);
		}
	}

	.imgs_list {
		padding: 5px 0;
		justify-content: flex-start;

		.imgs_son {
			margin: 0 8px 0 0;
			border-radius: 4px;
			overflow: hidden;
		}
	}

	.cell {
		// height: 60rpx;

		.label {
			color: #333333;
		}

		.value {
			color: #ADADAD;

			&.scan {
				color: #F68C4F;
				justify-content: flex-end;
			}
		}
	}

	.btn {
		width: 80%;
		height: 92rpx;

		background-color: #4F6FF6;

		border-radius: 10rpx;
		font-size: 30rpx;

		color: #FFFFFF;
		margin: 40rpx 20rpx 50rpx;
	}

	.main_bg {
		padding: 30rpx 20rpx;
	}

	.cell-group {
		border-radius: 20rpx;
		background: white;
		padding: 42rpx 48rpx;
	}

	.flex-item {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.label_title {
		font-size: 32rpx;
		color: #333;
	}

	.textarea {
		background: #eeeeee;
		border-radius: 20rpx;
		padding: 40rpx;
		color: #AAAAAA;
	}

	textarea {
		font-size: 28rpx;
		color: #AAAAAA;
		width: 100%;
		height: 100rpx !important;
	}

	.flex {
		display: flex;
		margin-bottom: 30rpx;
	}

	.border-bottom {
		border-bottom: 2rpx solid #E9E9E9;
		padding-bottom: 20rpx;
	}

	.flex-right {
		flex: 1;
		margin-left: 26rpx;
		display: flex;
		gap: 20rpx;
		flex-direction: column;

		.title {
			color: #333;
			fon-size: 36rpx;
		}

		.device {
			color: #ADADAD;
			font-size: 24rpx;
			background-color: #F8F8F8;
			border-radius: 10rpx;
			padding: 20rpx;
			width: fit-content;
		}

		.specs {
			color: #ADADAD;
			font-size: 24rpx;
			display: flex;
			flex-direction: column;
			gap: 20rpx;
		}
	}
</style>